<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        /* 假设的设备	320px 414px 640px */
		@media (min-width: 320px) {
			html {
				font-size: 50px;
			}
		}
		@media (min-width: 414px) {
			html {
				font-size: 64.6875px;
			}
		}
		@media (min-width: 640px) {
			html {
				font-size: 100px;
			}
		}
		body {
			margin: 0;
			padding: 0;
			font-size: 14px;
		}
		/* 流式容器 */
		header{
			width: 100%;
			height: 1rem;
			line-height: 1rem;
			font-size: 0.32rem;
			text-align: center;
			background: green;
			color: #fff;
		}
    </style>
</head>
<body>
	<!-- 1.伸缩布局	flex
	2.流式布局	百分比
	3.响应式布局  媒体查询	（超小屏设备的时候：流式布局）
	4.网格布局	Grid
	共同点：元素只能做宽度的适配（排除图片）
	适配方案rem: 宽度和高度都能做到适配（等比缩放）
	5.rem布局
	通过控制html上的字体大小去控制页面上所有以rem为单位
	的基准值控制尺寸
	5.1 把页面上px单位转换成rem单位
	5.2 页面制作的时候 psd 上的量取的px转成rem使用
	5.3 怎么转换？预设一个基准值 方便计算 100px
	5.4 适配的时候设置基准值  320px 50px 怎么算：（
	640px 100px === 320px 50px
	5.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前
	设备的宽度
	4.6 怎么去改变 （js换算，媒体查询推荐） -->
<header>购物车</header>
</body>
</html>